<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月24日 21:57:19
-->
<template>
  <div class="dynamicDetails">
    <div class="bg"></div>
    <section class="animate__animated animate__bounceInDown">
      <div class="section-left">
        <div class="section-left-content">
          <div class="section-left-content-box">
            <div class="content-user">
              <img :src="baseUrl + dataObj.createUserimg" alt />
              <div>
                <p class="content-user-name">
                  {{ dataObj.createUser }}
                  <img
                    src="../../../assets/rz.png"
                    alt
                    style="width:18px !important;margin-top: -3px;"
                    v-if="dataObj.createUserrole==='0'"
                  />
                </p>
                <p class="content-user-date">
                  <span
                    style="color:#1890ff;"
                  >{{dataObj.createUserrole==0?'超级管理员':dataObj.createUserrole==1?'管理员':''}}</span>
                  {{ getTime(dataObj.createDate) }}
                </p>
              </div>
            </div>
            <div class="content-box">
              <div>{{ dataObj.dynamicText }}</div>
              <div class="content-image">
                <div v-for="(ele, i) in dynamicImage" :key="i">
                  <img :src="baseUrl + ele" preview="1" />
                </div>
              </div>
            </div>
            <div class="content-give">
              <div>
                <img
                  src="../../../assets/dianzan1.png"
                  alt
                  title="点个赞吧"
                  style="height: 19px"
                  @click="give(dataObj)"
                  v-if="!givelist()"
                />
                <img
                  src="../../../assets/dianzan.png"
                  alt
                  title="已点赞了哦"
                  style="width: 19px; height: 17px"
                  v-if="givelist()"
                />
                <span class="content-givenum">{{ dynamicGive.length }}人已赞</span>
              </div>
              <div>
                <img src="../../../assets/pl.png" alt style="height: 22px" />
                <span class="content-givenum">{{ dynamiccomment.length }}条评论</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 发布评论 -->
        <div class="section-left-boxfabu">
          <a-textarea v-model="valueText" placeholder="发个评论吧" />
          <div class="submit-imglist">
            <div class="submit-imglist-box" v-for="(item, index) in imglist" :key="index">
              <img v-lazy="baseUrl + item" class="image" preview="1" :preview-text="index" />
              <a-icon type="close-circle" class="delete_img" @click="delete_img(item, index)" />
            </div>
          </div>
          <div class="section-left-submit">
            <div style="width:30px"  v-if="imglist.length==9"></div>
            <a-upload
              name="avatar"
              :show-upload-list="false"
              :accept="fileAccept"
              :customRequest="uploadImg"
              :beforeUpload="beforeUpload"
              v-if="imglist.length!=9"
            >
              <img src="../../../assets/photo.png" alt />
              <span style="margin-left:10px">{{imglist.length}}/9</span>
            </a-upload>
            <div>
              <span style="font-size: 12px;margin-right: 10px;">{{valueText.trim().length}}/300</span>
              <a-button
                type="primary"
                @click="submit"
                :disabled="valueText.trim()==''||valueText.trim().length>300"
              >评论</a-button>
            </div>
          </div>
        </div>
        <!-- 评论列表 -->
        <div class="pinglunLength">共{{dynamiccomment.length}}条评论</div>
        <div class="pinglun">
          <div class="pinlun-box" v-for="(item,index) in dynamiccomment" :key="index">
            <div class="pinlun-box-user">
              <img :src="baseUrl+item.UserImg" alt />
              <span>{{item.UserName}}</span>
              <img
                src="../../../assets/rz.png"
                alt
                style="width:18px !important;margin-top: -3px;height: 18px;margin-left: 3px"
                v-if="item.UserRoleId==='0'"
              />
              <span
                style="font-size: 12px;font-weight: normal;margin: 0;"
              >{{item.UserRoleId==='0'?'超管':item.UserRoleId==='1'?'管理员':''}}</span>
              <span v-if="item.byUserId!=''" style="color:#1890ff">回复</span>
              <span v-if="item.byUserId!=''">{{item.byUserName}}</span>

              <img
                src="../../../assets/rz.png"
                alt
                style="width:18px !important;margin-top: -3px;height: 18px;margin-left: 3px"
                v-if="item.byUserRoleId==='0'"
              />
              <span
                style="font-size: 12px;font-weight: normal;margin: 0;"
              >{{item.byUserRoleId==='0'?'超管':item.byUserRoleId==='1'?'管理员':''}}</span>
            </div>
            <div class="pinlun-box-content">{{item.contentText}}</div>
            <div class="pinlun-box-img">
              <div class="pinlunimgbox" v-for="(ele,i) in item.contentImg" :key="i">
                <img :src="baseUrl+ele" alt preview="1" />
              </div>
            </div>
            <div class="pinglunFooter">
              <div style="font-size: 13px;color: rgb(153, 153, 153)">{{getTime(item.contentDate)}}</div>
              <div class="huifu" @click="huifu(index)">
                <img src="../../../assets/pl.png" alt />
                <span>回复</span>
              </div>
            </div>
            <div
              :class="actived==index?'huifuactive':'activednone'"
              style="margin-left:50px;margin-top:6px"
            >
              <div class="section-left-boxfabu">
                <a-textarea v-model="valueText1" :placeholder="'回复'+item.UserName" />
                <div class="submit-imglist">
                  <div class="submit-imglist-box" v-for="(item, index) in imglist1" :key="index">
                    <img v-lazy="baseUrl + item" class="image" preview="1" :preview-text="index" />
                    <a-icon
                      type="close-circle"
                      class="delete_img"
                      @click="delete_img1(item, index)"
                    />
                  </div>
                </div>
                <div class="section-left-submit" style="padding-right:0">
                  <div style="width:30px"  v-if="imglist1.length==9"></div>
                  <a-upload
                    name="avatar"
                    :show-upload-list="false"
                    :accept="fileAccept"
                    :customRequest="uploadImg1"
                    :beforeUpload="beforeUpload"
                     v-if="imglist1.length!=9"
                  >
                    <img src="../../../assets/photo.png" alt />
                    <span style="margin-left:10px">{{imglist1.length}}/9</span>
                  </a-upload>
                  <div>
                    <span
                      style="font-size: 12px;margin-right: 10px;"
                    >{{valueText1.trim().length}}/300</span>
                    <a-button
                      type="primary"
                      @click="huifuSubmit(item)"
                      :disabled="valueText1.trim()==''||valueText1.trim().length>300"
                    >回复</a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-right">
         <RightBox />
      </div>
    </section>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
import { uploads } from "@/utils/upload";
import { timeago } from "@/utils/timeago";
import RightBox from "./rightBox";

export default {
  name: "dynamicDetails",
  /**注册组件*/
  components: {RightBox},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      dataObj: {},
      dynamiccomment: [],
      dynamicGive: [],
      dynamicImage: [],
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      imglist: [],
      imglist1: [],
      fileAccept: "image/gif, image/jpeg, image/jpg, image/png, image/svg",
      valueText: "",
      valueText1: "",
      actived: null
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    this.getDetails();
    this.$previewRefresh();
  },
  /**所有方法*/
  methods: {
    huifu(index) {
      this.actived = index;
    },
    //回复
    huifuSubmit(item) {
      if (!localStorage.getItem("token")) {
        this.$message.error("请先进行登录在进行回复！");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      let params = {
        id: this.dataObj.id,
        userId: this.userInfo.userId,
        byUserId: item.userId,
        contentText: this.valueText1,
        contentImg: this.imglist1
      };
      requset("post", "/dynamic/comment", params).then(res => {
        if (res.data.code == 200) {
          this.valueText1 = "";
          this.imglist1 = [];
          this.$message.success(res.data.msg);
          this.getDetails();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 评论
    submit() {
      if (!localStorage.getItem("token")) {
        this.$message.error("请先进行登录在进行评论！");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      let params = {
        id: this.dataObj.id,
        userId: this.userInfo.userId,
        byUserId: "",
        contentText: this.valueText,
        contentImg: this.imglist,
        tongzhiuserid: this.dataObj.createUserId
      };
      requset("post", "/dynamic/comment", params).then(res => {
        if (res.data.code == 200) {
          this.valueText = "";
          this.imglist = [];
          this.$message.success(res.data.msg);
          this.getDetails();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取详情
    getDetails() {
      let id = this.$route.query.id;
      requset("post", "/dynamic/listDetails", { id }).then(res => {
        if (res.data.code == 200) {
          this.dataObj = res.data.data[0];
          this.dynamiccomment = res.data.data[0].dynamiccomment;
          this.dynamiccomment.sort((a, b) => {
            return b.contentDate < a.contentDate ? -1 : 1;
          });
          this.dynamicGive = res.data.data[0].dynamicGive;
          this.dynamicImage = res.data.data[0].dynamicImage;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点赞
    give(item) {
      if (!localStorage.getItem("token")) {
        this.$message.error("请先进行登录在进行点赞！");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      let params = {
        id: item.id,
        userId: this.userInfo.userId,
        userName: this.userInfo.userName
      };
      requset("post", "/dynamic/give", params).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getDetails();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    givelist() {
      let giveshow = false;
      if (this.userInfo) {
        this.dynamicGive.forEach(ele => {
          if (this.userInfo.userId == ele.userId) {
            giveshow = true;
          }
        });
      }
      return giveshow;
    },
    // 时间 几天前 几月前
    getTime(time) {
      return timeago(time);
    },
    //删除图片
    delete_img(item, index) {
      requset("post", "/dynamic/deleteImg", { url: item }).then(res => {
        if (res.data.code == 200) {
          this.imglist.splice(index, 1);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //删除图片
    delete_img1(item, index) {
      requset("post", "/dynamic/deleteImg", { url: item }).then(res => {
        if (res.data.code == 200) {
          this.imglist1.splice(index, 1);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //上传文件前校验
    beforeUpload(file) {
      const extension1 = file.name.split(".")[1] === "jpg";
      const extension2 = file.name.split(".")[1] === "jpeg";
      const extension3 = file.name.split(".")[1] === "png";
      const extension4 = file.name.split(".")[1] === "gif";
      const extension5 = file.name.split(".")[1] === "svg";
      if (
        !extension1 &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5
      ) {
        this.$message.error("别乱选，好好上传图片，再乱选头给你打歪！");
      }
      return extension1 || extension2 || extension3 || extension4 || extension5;
    },
    // 评论文件上传
    uploadImg(upload) {
      if (!localStorage.getItem("token")) {
        this.$message.error("请先进行登录在进行点赞！");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      if (this.imglist.length == 9) {
        this.$message.error("请只能上传九张图片！");
        return;
      }
      uploads("/dynamic/uploads", upload.file).then(res => {
        if (res.data.code == 200) {
          this.imglist.push(res.data.imgUrl);
          this.$previewRefresh();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 回复文件上传
    uploadImg1(upload) {
      if (!localStorage.getItem("token")) {
        this.$message.error("请先进行登录在进行点赞！");
        setTimeout(() => {
          this.$router.push("/login");
        }, 500);
        return;
      }
      if (this.imglist1.length == 9) {
        this.$message.error("请只能上传九张图片！");
        return;
      }
      uploads("/dynamic/uploads", upload.file).then(res => {
        if (res.data.code == 200) {
          this.imglist1.push(res.data.imgUrl);
          this.$previewRefresh();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(./style.css);
.section-left-content-box {
  margin-bottom: 0;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
::v-deep textarea.ant-input {
  border: none;
}
.pinglun {
  padding: 10px;
  background: #fff;
}
.pinlun-box-user {
  margin: 10px;
  font-weight: 600;
}
.pinlun-box-user img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
}
.pinlun-box-user span {
  margin-left: 10px;
}
.pinlun-box-content {
  margin-left: 50px;
}
.pinlun-box-img {
  margin-left: 50px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.pinlunimgbox {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.pinlun-box-img img {
  width: 100%;
  height: 100%;
}
.pinlun-box-img img:hover {
  cursor: -webkit-zoom-in;
}
.pinglunFooter {
  margin-left: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.huifu {
  display: flex;
  align-items: center;
}
.huifu:hover {
  cursor: pointer;
  color: #1890ff;
}
.huifu img {
  width: 20px;
  margin-right: 5px;
}
.huifuactive {
  display: block;
}
.activednone {
  display: none;
}
.pinglunLength {
  background: #fff;
  padding: 18px;
  font-size: 15px;
  font-weight: 700;
}
.section-right{
  margin-top: 10px;
}

/* 如果浏览器窗口小于 900px */
@media only screen and (max-width: 900px) {
  section {
    width: 100%;
  }
  .section-left {
    width: 100%;
  }
  .section-right {
    display: none !important;
  }
}
</style>